<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>
      Timeline | Peer Build
    </title>

    <!-- Optionally also include locales for Moment. -->
    <script
      type="text/javascript"
      src="https://unpkg.com/moment@latest"
    ></script>
    <script
      type="text/javascript"
      src="https://unpkg.com/vis-data@latest/peer/umd/vis-data.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../../peer/umd/vis-timeline-graph2d.min.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="../../styles/vis-timeline-graph2d.min.css"
    />
  </head>

  <body>
    <div id="title">
      <h1>Timeline</h1>
      <h2>Peer Build</h2>
    </div>

    <p>
      A basic timeline. You can move and zoom the timeline, and select items.
    </p>

    <div id="visualization"></div>

    <p>
      Peer build is designed to work well with other packages from the Vis
      family. Compared to the standalone or legacy builds it doesn't include
      dependencies which allows the same DataSet (and other dependencies) to be
      used in Timeline and other packages (e.g. Network). In UMD version this
      build doesn't suffer from the bug where exported members from different
      packages get overwritten rendering some functionality unusable.
    </p>

    <h4>When to use</h4>
    <p>
      When you need multiple packages from the Vis family on the same page or
      finer control over what gets loaded to for example reduce bundle size by
      omitting unneeded locales or want to reuse a single copy of Moment
      throughout your app.
    </p>

    <h4>How to use</h4>

    <h5>Browser UMD</h5>
    <pre><code>
&lt;!--
  In the following URLs you may want to replace &commat;latest by &commat;version
  to prevent unexpected potentionally breaking updates.
  For example vis-data&commat;1.0.0 instead of vis-data&commat;latest.
--&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://unpkg.com/moment&commat;latest&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://unpkg.com/vis-data&commat;latest/peer/umd/vis-data.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://unpkg.com/vis-timeline&commat;latest/peer/umd/vis-timeline-graph2d.min.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://unpkg.com/vis-timeline/styles/vis-timeline-graph2d.min.css&quot; /&gt;
&lt;!-- You may include other packages like Vis Network or Vis Graph3D here. --&gt;
&lt;!-- You can optionally include locales for Moment if you need any. --&gt;

&lt;div id=&quot;visualization&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
  // DOM element where the Timeline will be attached
  const container = document.getElementById("visualization");

  // Create a DataSet (allows two way data-binding)
  const items = new vis.DataSet([
    { id: 1, content: "item 1", start: "2014-04-20" },
    { id: 2, content: "item 2", start: "2014-04-14" },
    { id: 3, content: "item 3", start: "2014-04-18" },
    { id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-19" },
    { id: 5, content: "item 5", start: "2014-04-25" },
    { id: 6, content: "item 6", start: "2014-04-27", type: "point" }
  ]);

  // Configuration for the Timeline
  const options = {};

  // Create a Timeline
  const timeline = new vis.Timeline(container, items, options);
&lt;/script&gt;
      </code></pre>

    <h5>Bundled ESM</h5>
    <pre><code>
import { DataSet } from "vis-data/peer";
import { Timeline } from "vis-timeline/peer";
import "vis-timeline/styles/vis-timeline-graph2d.css";
// You may import from other packages like Vis Network or Vis Graph3D here.
// You can optionally include locales for Moment if you need any.

// DOM element where the Timeline will be attached
const container = document.getElementById("visualization");

// Create a DataSet (allows two way data-binding)
const items = new DataSet([
  { id: 1, content: "item 1", start: "2014-04-20" },
  { id: 2, content: "item 2", start: "2014-04-14" },
  { id: 3, content: "item 3", start: "2014-04-18" },
  { id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-19" },
  { id: 5, content: "item 5", start: "2014-04-25" },
  { id: 6, content: "item 6", start: "2014-04-27", type: "point" }
]);

// Configuration for the Timeline
const options = {};

// Create a Timeline
const timeline = new Timeline(container, items, options);
      </code></pre>

    The code above has to be injected into a page which contains an element with
    <code>visualization</code> id. Like for example:
    <pre><code>&lt;div id=&quot;visualization&quot;&gt;&lt;/div&gt;</code></pre>

    <script type="text/javascript">
      // DOM element where the Timeline will be attached
      var container = document.getElementById("visualization");

      // Create a DataSet (allows two way data-binding)
      var items = new vis.DataSet([
        { id: 1, content: "item 1", start: "2014-04-20" },
        { id: 2, content: "item 2", start: "2014-04-14" },
        { id: 3, content: "item 3", start: "2014-04-18" },
        { id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-19" },
        { id: 5, content: "item 5", start: "2014-04-25" },
        { id: 6, content: "item 6", start: "2014-04-27", type: "point" }
      ]);

      // Configuration for the Timeline
      var options = {};

      // Create a Timeline
      var timeline = new vis.Timeline(container, items, options);
    </script>
  </body>
</html>
